import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Clipboard, Image } from 'react-native';
import { Container, Content, View, Button, Text, Icon } from 'native-base';
import { ListItem, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';
import Moment from 'moment';

import { Header } from '../../component';
import { Colors, Metrics } from '../../theme';


class UserCenter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			headPortrait: ''
		}
	}


	UNSAFE_componentWillMount() {

	}

	componentDidMount() {
		if (this.props.headPortrait) { 
			this.setState({headPortrait: this.props.headPortrait})
		  }else{
			this.setState({headPortrait: require('../../asserts/images/user/headPortrait.jpg')})
		  }
	}

	render() {
		let { phone, nickName, inviteCode, regTime, position, inviter } = this.props;
		return (
			<Container>
				<Header title="个人信息" onLeftPress={() => this.props.navigation.goBack()} />
				<Content>
					<View style={Styles.container}>
						<View style={Styles.touxiangConts}>
							{
								this.state.headPortrait?
								<Avatar
								size="large"
								rounded
								source={this.state.headPortrait}
								onPress={() => this.props.navigation.navigate('UserCenter')}
								activeOpacity={0.7}
							/>:
							<Avatar
								size="large"
								rounded
								source={require('../../asserts/images/user/headPortrait.jpg')}
								onPress={() => this.props.navigation.navigate('UserCenter')}
								activeOpacity={0.7}
							/>
							}
							<View style={{ marginTop: 10, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
								<Text style={{ fontSize: 20, color: '#91AEA6' }}>
									ID
								</Text>
								<Text style={{ fontSize: 20, marginLeft: 5 }}>
									{inviteCode}
								</Text>
							</View>
						</View>

						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>账号</Text>
							<Text style={[Styles.lableTxt, { color: '#7A7A7A' }]}>{phone}</Text>
						</View>
						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>昵称</Text>
							<TouchableOpacity onPress={() => { }}>
								<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: "center" }}>
									<Text style={[Styles.lableTxt, Styles.nickname]} numberOfLines={1}>{nickName}</Text>
								</View>
							</TouchableOpacity>
						</View>
						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>信誉分</Text>
							<TouchableOpacity onPress={() => { }}>
								<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: "center" }}>
									<Text style={[Styles.lableTxt, Styles.nickname]} numberOfLines={1}>{this.props.user.reputationScore}</Text>
								</View>
							</TouchableOpacity>
						</View>
						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>邀请人</Text>
							<TouchableOpacity onPress={() => { }}>
								<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: "center" }}>
									<Text style={[Styles.lableTxt, Styles.nickname]} numberOfLines={1}>{this.props.user.inviterPhone}</Text>
								</View>
							</TouchableOpacity>
						</View>
						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>注册时间</Text>
							<TouchableOpacity onPress={() => { }}>
								<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: "center" }}>
									<Text style={[Styles.lableTxt, Styles.nickname]} numberOfLines={1}>{ Moment(regTime).format('YYYY-MM-DD H:mm:ss') }</Text>
								</View>
							</TouchableOpacity>
						</View>
						<View style={Styles.labelContainer}>
							<Text style={Styles.lableTxt}>地区</Text>
							<TouchableOpacity onPress={() => { }}>
								<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: "center" }}>
									<Text style={[Styles.lableTxt, Styles.nickname]} numberOfLines={1}>{position}</Text>
								</View>
							</TouchableOpacity>
						</View>

					</View>




				</Content>
			</Container>
		);
	}

}

const mapStateToProps = state => ({
	user: state.user,
	phone: state.user.phone,
	nickName: state.user.nickName,
	head_portrait: state.user.head_portrait,
	inviteCode: state.user.inviteCode,
	position: state.user.position,
	regTime: state.user.regTime,
});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(UserCenter);

const Styles = StyleSheet.create({
	container: { flex: 1, backgroundColor: '#FFFFFF' },
	touxiangConts: {
		justifyContent: 'center', alignItems: 'center', marginTop: 20, marginBottom: 8
	},
	button: { margin: 100, backgroundColor: 'orange' },
	labelContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: 52,
		marginLeft: 10,
		paddingRight: 10,
		alignItems: 'center',
		borderBottomWidth: StyleSheet.hairlineWidth,
		borderColor: '#eceff4'
	},
	lableTxt: { fontSize: 16, color: '#363636' },
	nickname: { textAlign: "right", paddingRight: 10, color: '#7A7A7A' },
	bodyDtxt: {
		fontSize: 14,
		color: "#91AEA6",
		flexWrap: "wrap",
	},
});